<template>
  <div class="example">
    <input v-model.number="firstNumber" type="number" step="20"> +
    <input v-model.number="secondNumber" type="number" step="20"> =
    {{ result }}
    <p>
      <animated-integer v-bind:value="firstNumber"></animated-integer> +
      <animated-integer v-bind:value="secondNumber"></animated-integer> =
      <animated-integer v-bind:value="result"></animated-integer>
    </p>
  </div>
</template>

<script>
/**
 * 例子 - 状态过渡 - 提取到专用组件
 */
import animatedInteger from './demo/animated-integer';

export default {
  data() {
    return {
      firstNumber: 20,
      secondNumber: 40
    };
  },
  components: {
    animatedInteger
  },
  computed: {
    result() {
      return this.firstNumber + this.secondNumber
    }
  }
}
</script>

<style lang="less" scoped>
.example {
  width: 600px;
}
</style>
